<template>
  <div>
    <div class="navbar">
      <city-header class="box-header">
        <span>{{ cityLocate.name }}</span>
      </city-header>
      <van-search class="box-search" v-model="value" background="#f4f4f4" placeholder="输入城市名或拼音"/>
    </div>

    <!--    <div class="box" :style="{height:height}">-->
    <div class="box">
      <van-index-bar :index-list="computedList" :z-index="99999" :sticky-offset-top="98" @select="handleSelect">
        <van-cell class="gps-city">
          <div class="gps-text">GPS定位你所在的城市</div>
          <button @click="handleJumpCinema(cityLocate.name,cityLocate.cityId)">{{ cityLocate.name }}</button>
          <div class="gps-text">热门城市</div>
          <div class="hot-city">
            <div v-for="item in hotCity" :key="item.cityId" @click="handleJumpCinema(item.name,item.cityId)">
              <button>{{ item.name }}</button>
            </div>
          </div>
        </van-cell>

        <div v-if="cityList.length" v-for="item in cityList" :key="item.type">
          <van-index-anchor :index="item.type"/>
          <van-cell :title="data.name" v-for="data in item.list" :key="data.cityId"
                    @click="handleJumpCinema(data.name,data.cityId)"/>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import cityHeader from '@/components/city/CityHeader';
import http from "@/util/http";
import myMixin from "@/util/myMixin";
import {mapMutations} from 'vuex';
import {Toast} from "vant";

export default {
  mixins:[myMixin],  // 混入

  data() {
    return {
      value: '',
      cityLocate: '',
      cityList: [],
      hotCity: [],
      height: '0px'
    };
  },
  components: {
    cityHeader
  },
  computed: {
    computedList() {
      return this.cityList.map(item => item.type)
    }
  },
  methods: {
    ...mapMutations(['changeCityName','changeCityId']),

    handleSelect(data) {
      // console.log('Select',data)
      Toast({
        message: data,
        duration: 500
      });
    },

    // 跳转到影院，并且带上影院id
    handleJumpCinema(name,id) {
      // console.log(name,id)

      // 传统的多页面方案
      // 1. location.href = '/cinemas?cityName='+name+'cityId='+id
      // 2. cookie, localStorage

      // 单页面方案
      // 1. 中间人模式
      // 2. bus事件总线 $on,$emit

      // vue - 状态管理模式
      // 无监管下修改状态值，容易引发bug无从下手
      // this.$store.state.cityName = name;
      // this.$store.state.cityId = id;

      // 有监管
      // commit 是打开 门禁mutations 的门卡
      this.changeCityName(name)
      this.changeCityId(id)
      this.$router.back()
    },

    renderCity(list) {
      let cityList = []
      let letterList = []
      for (let i = 65; i < 91; i++) {    // 遍历A到Z
        letterList.push(String.fromCharCode(i))    // 将数字转换成字母
      }
      letterList.forEach(letter => {
        let newList = list.filter(item => item.pinyin.substring(0, 1).toUpperCase() === letter)   // 将拼音首字母大小，然后提取首字母为A,B,C...的
        // console.log(newList)
        newList.length > 0 && cityList.push({   // 排除空数组
          type: letter,
          list: newList
        })
      })
      // console.log(cityList)
      return cityList
    },
    filterHot(list) {
      return list.filter(item => item.isHot === 1)
    }
  },
  created() {
    http.httpForCity().then(res => {
      // console.log(res.data.data)
      this.cityList = this.renderCity(res.data.data.cities)
      this.hotCity = this.filterHot(res.data.data.cities)
    })
    http.httpForCityLocate().then(res => {
      // console.log(res.data.data.city.name)
      this.cityLocate = res.data.data.city
      // console.log(res.data.data.city)
    })
  },
  // mounted() {
  //   // 进来时底部选项卡隐藏
  //   this.hide()
  // },
  // destroyed() {
  //   // 出去时底部选项卡显示
  //   this.show()
  // }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 98px;
}

.box-header {
  height: 44px;
}

.box-search {
  width: 100%;
  position: fixed;
  top: 44px;
  left: 0;
  z-index: 99999999;
}

.van-search__content--square {
  background-color: #fff;
}

.van-index-bar {
  background-color: #f4f4f4;

  .gps-city {
    width: 100%;
    padding-bottom: 0;
    font-size: 13px;
    color: #191a1b;
    //overflow: hidden;

    .gps-text {
      margin-bottom: 10px;
      color: #797d82;
    }

    button {
      font-size: 14px;
      width: 99.83px;
      height: 30px;
      background-color: #f4f4f4;
      margin: 0 7.5px 15px 7px;
      border-radius: 3px;
      border: 0;
      outline: none;
    }

    .hot-city {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .last-btn {
      margin-bottom: 5px;
    }
  }
}

.box {
  background-color: #fff;
}

</style>
